<script setup lang="ts">
import {
  NList,
  NListItem,
  NText,
  NCard,
  NButton,
  NTag,
  NFlex,
  NModal,
  NInput,
  NInputNumber,
} from "naive-ui";

import { completedTask, newTask, putTask } from "../apis/task";
import type { taskType } from "../mod/madle";
import naiveui from "../utils/naiveui";
import { useUserStore } from "../stores/userStore";
import { inject, ref } from "vue";
const userStore = useUserStore();
const handleCompleted = async (task_id: number) => {
  const res = await completedTask(task_id, props.userid);
  if (res.status == 201) {
    naiveui.message.success(res.data.message);
    userStore.updatePoint();
  }
};
const updateTaskList = inject<Function>("updateTask");
const props = defineProps<{
  taskList: taskType[];
  userid: number;
}>();
const showModal = ref<boolean>(false);
/**put->false,add->true*/
const putOrAdd = ref<boolean>(false);

const bodyStyle = { width: "600px" };
const name = ref<string>("");
const desc = ref<string>("");
const point = ref<number>(0);
const id = ref<number>(0);
const addTask = () => {
  showModal.value = true;
  putOrAdd.value = true;
};
const changeTask = (task: taskType) => {
  putOrAdd.value = false;
  showModal.value = true;
  name.value = task.task_name;
  desc.value = task.description || "";
  point.value = task.points;
  id.value = task.id;
};
const handlePutTask = async () => {
  showModal.value = false;
  const res = await putTask(id.value, name.value, desc.value, point.value);
  if (res.status == 200) {
    naiveui.message.success(res.data.message);
    await updateTaskList!();
  }
};
const handleAddTask = async () => {
  showModal.value = false;
  const res = await newTask(props.userid, name.value, desc.value, point.value);
  if (res.status == 201) {
    naiveui.message.success(res.data.message);
    await updateTaskList!();
  }
};
</script>
<template>
  <NCard>
    <NList hoverable clickable>
      <NListItem><NButton @click="addTask">新增任务</NButton></NListItem>
      <NListItem v-for="task in props.taskList">
        <NFlex justify="space-between">
          <NText>{{ task.task_name }}</NText>
          <div>
            <n-tag type="warning">{{ task.points }}</n-tag>
            <NButton
              type="success"
              size="small"
              @click="handleCompleted(task.id)"
              >完成</NButton
            >
            <NButton type="info" size="small" @click="changeTask(task)"
              >修改</NButton
            >
          </div>
        </NFlex>
      </NListItem>
    </NList>
  </NCard>
  <n-modal
    v-model:show="showModal"
    class="custom-card"
    preset="card"
    :style="bodyStyle"
    :title="putOrAdd ? '任务新增' : '任务修改'"
    size="huge"
    :bordered="false"
  >
    <template #header-extra> 噢! </template>
    <NFlex>
      <NInput v-model:value="name" type="text" />
      <NInput v-model:value="desc" type="textarea" />
      <NInputNumber v-model:value="point" />
    </NFlex>
    <template #action>
      <NButton @click="handlePutTask" v-if="!putOrAdd"> 确认修改 </NButton>
      <NButton @click="handleAddTask" v-else> 确认新增 </NButton>
    </template>
  </n-modal>
</template>
